<script setup lang="ts">
import { ref, computed, watch, type Ref } from "vue";
import { useAppStoreHook } from "@/store/modules/app";
import {
  delay,
  useDark,
  useECharts,
  type EchartOptions
} from "@pureadmin/utils";
import * as echarts from "echarts/core";

const { isDark } = useDark();

const theme: EchartOptions["theme"] = computed(() => {
  return isDark.value ? "dark" : "light";
});

const barChartRef = ref<HTMLDivElement | null>(null);
const { setOptions, resize } = useECharts(barChartRef as Ref<HTMLDivElement>, {
  theme
});

setOptions(
  {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      }
    },
    grid: {
      bottom: "20px",
      right: "10px"
    },
    legend: {
      //@ts-expect-error
      right: true,
      data: [ "健康值"]
    },
    xAxis: [
      {
        type: "category",
        axisTick: {
          alignWithLabel: true
        },
        axisLabel: {
          interval: 0
          // width: "70",
          // overflow: "truncate"
        },
        data: ["血压", "心率",  "血氧", "体重/身高"],
        triggerEvent: true
      }
    ],
    yAxis: [
      {
        type: "value",
        triggerEvent: true
      }
    ],
    series: [
      
      {
        name: "健康值",
        type: "bar",
        barWidth: "15%",
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#e6a23c"
            },
            {
              offset: 1,
              color: "#eebe77"
            }
          ])
        },
        data: [94, 96, 98,99]
      },
     
    ],
    addTooltip: true
  },
  {
    name: "click",
    callback: params => {
      console.log("click", params);
    }
  }
);

watch(
  () => useAppStoreHook().getSidebarStatus,
  () => {
    delay(600).then(() => resize());
  }
);
</script>

<template>
  <div ref="barChartRef" style="width: 100%; height: 35vh" />
  <div class="mt-10">
    <p>①　血压：平均每日上午测量数据。2023年1月至6月的血压数据在130/80mmHg至150/90mmHg之间波动，其中4月份的数据偏高，最高记录为160/95mmHg。<br/>
②　心率：平均每日心率数据。2023年1月至6月的心率数据在75次/分钟至90次/分钟之间波动，其中4月份数据偏高，最高记录为98次/分钟。<br/>
③　血糖：早餐前空腹血糖数据。2023年1月至6月的血糖数据在5.5mmol/L至8.0mmol/L之间波动，4月份的数据偏高，最高记录为9.0mmol/L。<br/>
④　健康趋势分析图：根据查询到的数据，生成健康趋势分析图表，显示血压、心率和血糖在六个月内的变化趋势。</p>
  </div>
</template>
